<template>
  <view class="home">

	<view class="header-bar">
      <image class="header-logo" src="https://www.enkilife.cn/themes/default/assets2024/logo.png" mode="heightFix" />
    </view>

    <view class="banner-wrapper">
      <swiper class="swiper"
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="500"
        :circular="true"
        indicator-active-color="#e53935"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index" @tap="onBannerClick(item)">
          <image :src="item.cover" mode="aspectFill" class="swiper-image"/>
          <view class="swiper-title" v-if="item.title">{{item.title}}</view>
        </swiper-item>
      </swiper>

      <view class="search-overlay">
        <view class="search-row">
          <input class="search-input" placeholder="请输入货号/产品关键词" v-model="searchValue" />
          <button class="search-btn" @click="onSearch">
            <svg class="search-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>
              <line x1="16.3" y1="16.3" x2="21" y2="21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
        </view>
      </view>
    </view>

    <grid-menu :list="gridList"></grid-menu>
    <tabBar></tabBar>
  </view>
</template>

<script>
import rfItemPopup from '@/components/rf-item-popup';
import gridMenu from '@/components/grid_menu.vue';
import HeaderNav from '@/components/header-nav/index.vue';
import { indexList} from '@/api/product';
export default {
  components: {
    rfItemPopup,
    gridMenu,
    HeaderNav
  },
  data() {
    return {
			   searchValue:'',
				 bannerList:[],
				 gridList:[]
    }
  },
	onLoad(options) {
     this.getIndexConfig()
	},
  methods: {
		// 轮播图点击跳转
		onBannerClick(item) {
			console.log('轮播图点击:', item);

			if (!item) {
				return;
			}

			 if (item.jump_link) {
				 console.log(item.jump_link)
				// 兼容旧版本，如果有 url 字段直接跳转
				// // #ifdef H5
				// window.open(item.jump_link, '_blank');
				// // #endif

				uni.navigateTo({
					url: item.jump_link
				});

			} else {
				console.log('轮播图没有配置跳转链接');
			}
		},

		// 获取商品列表
		async getIndexConfig(type) {
			var  that = this
			await this.$http
				.get(`${indexList}`, {})
				.then(async r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					// this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
						that.gridList = r.data.gridList;
						console.log(that.gridList)
						that.menus = r.data.menus;
						that.tabbarList = r.data.gridList;
            that.bannerList = r.data.bannerList;

				})
				.catch(err => {
					this.errorInfo = err;
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
    onMenuClick(name) {
      // 处理菜单点击事件
      console.log('Menu clicked:', name);
    },

    	cGo(item) {
    					const link = item.link || item.url;
    					if (!link) return;

    					try {
    						// 标准化路径格式（去除前导/和查询参数）
    						const normalizedLink = link.replace(/^\//, '').split('?')[0];

    						// tabBar页面列表 - 从实际的pages.json同步更新
    						const tabBarPages = [
    							'pages/index/index',
    							'pages/profile/profile'
    						];

    						// 判断是否为tabBar页面
    						const isTabBarPage = tabBarPages.includes(normalizedLink);

    						if (isTabBarPage) {
    							uni.switchTab({
    								url: `/${normalizedLink}`,
    								fail: (err) => {
    									console.error('switchTab failed:', err);
    									// 如果switchTab失败，回退到普通导航
    									uni.navigateTo({ url: link });
    								}
    							});
    						} else {
    							uni.navigateTo({
    								url: link,
    								fail: (err) => {
    									console.error('navigateTo failed:', err);
    								}
    							});
    						}
    					} catch (error) {
    						console.error('Navigation error:', error);
    						// 发生错误时尝试普通导航
    						uni.navigateTo({ url: link });
    					}
    				},
		onSearch() {
		  const keyword = this.searchValue.trim();
		  console.log(keyword);
		  if (keyword) {
		    const url = `/pages/product/list?keyword=${encodeURIComponent(keyword)}`;
		    uni.navigateTo({
		        url: url
		    });

		  }
		}

  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
.home {
  /* background: #fff0f0;  */
  min-height: 100vh; font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; }
.header { background: #fff;  }
.header-bar { display: flex; justify-content: space-between; align-items: center; padding: 24rpx; }
.header-logo { height: 70rpx; }
.header-menu { width: 56rpx; height: 56rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.menu-bar { width: 36rpx; height: 5rpx; background: #e53935; margin: 4rpx 0; border-radius: 3rpx; }
.search-row { display: flex; align-items: center; padding: 0rpx;
 background: #fff; border-radius: 16rpx;
 margin: 0; }
.search-category-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 16rpx;
}
/* search-category-select-wrapper 边框 */
.search-category-select-wrapper {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.search-category {
  background: #fff0f0;
  border-radius: 10rpx;
  padding: 0 38rpx 0 28rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #222;
  font-weight: normal;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.select-arrow {
  position: absolute;
  right: 18rpx;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 22rpx;
  color: #888;
	  border-radius: 20rpx !important;
}
.search-input { flex: 1; height: 66rpx; border: none; background: #fff8f8;
  padding: 0 18rpx; font-size: 30rpx; margin-right: 14rpx; color: #222; }
/* search-input 边框 */
.search-input {
  border: 1px solid #ccc !important;
  border-radius: 20rpx !important;
}
.search-input {
  /* 保证输入内容和placeholder都垂直居中 */
  display: flex;
  align-items: center;
}
/* 针对uni-app/微信小程序等环境，若需兼容placeholder垂直居中，可加： */
.search-input::-webkit-input-placeholder {
  line-height: 66rpx;
}
.search-input:-moz-placeholder {
  line-height: 66rpx;
}
.search-input::-moz-placeholder {
  line-height: 66rpx;
}
.search-input:-ms-input-placeholder {
  line-height: 66rpx;
}
.search-btn {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  height: 66rpx;
  width: 80rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12rpx;
}
.search-icon {
  display: block;
  margin: 0 auto;
}

.section { margin: 32rpx 0; background: #fff; border-radius: 18rpx; padding: 32rpx 24rpx; }
.section-title-row {
  display: flex;
  align-items: flex-end;
  gap: 18rpx;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #e53935;
  letter-spacing: 1rpx;
  margin-bottom: 0;
  line-height: 1;
}
.section-subtitle {
  color: #666;
  font-size: 26rpx;
  margin-bottom: 0;
  align-self: flex-end;
  line-height: 1;
  padding-bottom: 2rpx; /* 你可以微调这个值，比如2rpx、3rpx、4rpx，看哪个最齐 */
}

.banner-wrapper {
  position: relative;
}

.search-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 10;

}

.search-row {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.95);
  border-radius: 16rpx;
  padding: 0px;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
}

.search-input {
  flex: 1;
  height: 90rpx;
  border: none;
  background: transparent;
  padding: 0 20rpx;
  font-size: 32rpx;
  color: #333;
  margin: 0; /* 移除可能的外边距 */
}

.search-btn {
  background: #e53935;
  border: none;
  border-radius: 0 8rpx 8rpx 0; /* 只保留右侧圆角 */
  height: 90rpx;
  width: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0; /* 移除可能的外边距 */
  padding: 0; /* 移除内边距 */
}

.swiper {
  width: 100%;
  height: 500rpx;
}

.swiper-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.swiper-item:active {
  transform: scale(0.98);
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.swiper-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 28rpx;
  padding: 20rpx;
  text-align: center;
}

</style>
